<template>
    <div class="salesman-detail">
        <div class="info-item">
            <normal-title title="基本信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">用户名</span>:
                    <div class="cont">
                        {{formData.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">职位</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{formData.job && formData.job.name || ''}}</span>
                        <el-select v-model="formData.job.id" v-else>
                            <el-option v-for="(item, i) in jobList" :key="i" :value="item.id" :label="item.name"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        <span  v-if="!isEditer">{{formData.phone || ''}}</span>
                        <el-input v-else placeholder="请输入手机号码" v-model.trim="formData.phone"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">用户状态</span>:
                    <div class="cont">
                        {{formData.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">身份证号</span>:
                    <div class="cont">
                        <span v-if="!isEditer">{{formData.cardNo || ''}}</span>    
                        <el-input v-else placeholder="请输入手机号码" v-model.trim="formData.cardNo"></el-input>
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">创建时间</span>:
                    <div class="cont" >
                        {{formData.createTime  && $normalTime(formData.createTime)}}
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item" >
            <normal-title title="用户信息" border></normal-title>
            <div class="form-box">
                <div class="form-item">
                    <span class="label">用户名</span>:
                    <div class="cont">
                        {{formData.user  && formData.user.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">手机号</span>:
                    <div class="cont">
                        {{formData.user && formData.user.phone || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">状态</span>:
                    <div class="cont">
                        {{formData.user && formData.user.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">最后登录时间</span>:
                    <div class="cont">
                        {{formData.user && $normalTime(formData.user.loginTime) || ''}}
                    </div>
                </div>
                <div class="form-item special">
                    <span class="label">证件</span><span style="vertical-align: middle;position: relative;top: 10px;">:</span>
                    <div class="cont">
                        <div class="car-list" v-for="(item, i) in carImg" :key="i" @click="saveCurrent(item, i)">
                            <img-upload :disabled="!isEditer" @uploadSuccess="uploadSuccess">
                                <div class="img-box">
                                        <img :src="item.url || ''" alt="" class="avatar" v-if="item.url">
                                        <span v-else>{{carName[i]}}</span>
                                </div>
                            </img-upload>
                        </div>
                    </div>
                </div>
                <div class="form-item special">
                    <span class="label">销售区域</span><span style="vertical-align: middle;position: relative;top: 10px;">:</span>
                    <div class="cont">
                        <div class="tree-box">
                            <el-tree :data="treeData" 
                            :props="defaultProps" 
                            show-checkbox
                            node-key="id"
                            :default-checked-keys="defaultChecked"
                            :disabled="isEditer"
                            check-on-click-node
                            ref="trees"
                            ></el-tree>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="info-item" v-if="formData.salesCompanys && formData.salesCompanys.length">
            <normal-title title="业务员签约公司" border></normal-title>
            <div class="form-box" v-for="(item, i) in formData.salesCompanys" :key="i">
                <div class="form-item">
                    <span class="label">公司名</span>:
                    <div class="cont">
                        {{formData.salesCompanys  && formData.salesCompanys.name || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">公司状态</span>:
                    <div class="cont">
                        {{formData.salesCompanys  && formData.salesCompanys.statusMessage || ''}}
                    </div>
                </div>
                <div class="form-item">
                    <span class="label">公司组织机构代码</span>:
                    <div class="cont">
                        {{formData.salesCompanys  && formData.salesCompanys.organizingCode || ''}}
                    </div>
                </div>
            </div>
        </div>   
        <div class="control">
            <el-button type="primary" v-if="!isEditer" @click="isEditer = true">编辑</el-button>
            <template v-else>
                <el-button @click="isEditer = false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </div>
    </div>
</template>
<script>
import {doAreaAllData, getAreaId, doCheckDatas} from '@/utils/index'
import {ALL_AREA} from '@/utils/common'
import {getDb, setDb} from '@/utils/auth'
export default {
    name: 'salesmanDetail',
    data () {
        return {
            forms: {
                password: '',
                role: {
                    id: ''
                },
            },
            formData: {},
            isEditer: false,
            roleList: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            treeData: [],
            defaultChecked: [],
            currentImg: {},
            currentImgIndex: 0,
            carName: ['身份证正面', '身份证反面'],
            carImg: [
                {
                    url: '',
                    size: 0,
                    resourceType: ''
                },
                {
                    url: '',
                    size: 0,
                    resourceType: ''
                }
            ],
            jobList: [],
            cc: ''
        }
    },
    created () {
        this.getAllArea()
        this.getJobList()
        this.getMsg()
    },
    methods: {
        saveCurrent (item, i) {
            this.currentImg = item
            this.currentImgIndex = i
        },
        uploadSuccess (url,obj ) {
            const {size, type} = obj
            let item = {
                    url,
                    size,
                    resourceType:type
            }
            this.$set(this.carImg, this.currentImgIndex, item)
        },
        getAllArea () {
            if (!getDb(ALL_AREA)) { 
                this.$api.common.getAllarea().then(r => {
                    setDb(ALL_AREA, r.data || [])
                    this.treeData = doAreaAllData(r.data || [])
                })
            } else {
                this.treeData = doAreaAllData(JSON.parse(getDb(ALL_AREA)) || [])
            }
        },
        doImg (imgs) {
            if (imgs && imgs.length) {
                if (imgs.length == 1) {
                    let item = imgs[0]
                    if (!item.resourceType) {
                        item.resourceType = ''
                    }
                    this.$set(this.carImg, 0, imgs[0])
                } else {
                    this.carImg = imgs
                }
            }
        },
        getMsg () {
            let param = {}
            param = {
                id: this.$route.params.id || ''
            }
            this.$loading(true)
            this.$api.userManage.getSalesManDetail(param).then(r => {
                this.formData = r.data || {}
                this.formData.images && this.doImg(this.formData.images || [])
                this.defaultChecked = getAreaId(r.data.salesAres || [])
            })
            this.$loading(false)
        },
        // 保存
        save () {
            const {formData} = this
            let param = {}
            for (let k in formData) {
                param[k] = formData[k]
            }
            param.salesAres =  doCheckDatas(this.$refs.trees.getCheckedKeys(true))
            param.images = this.carImg.filter(r => r.url)
            if (param.user) delete param.user
            if (param.job && param.job.name) delete param.job.name
            this.$loading(true)
            this.$api.userManage.putSalesmanUpdate(param).then(r => {
                this.$message.success('保存成功')
            }).finally(() => {
                this.$loading(false)
            })
        },
        // 获取 工作列表
        getJobList () {
            this.$api.common.getJobList().then(r => {
                let list = r.data || []
               this.jobList = list
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.salesman-detail {
    .info-item {
        background: #fff;
        padding: 10px 10px 0;
        .form-box {
            box-sizing: border-box;
            width: 100%;
            overflow: hidden;
            margin-bottom: 16px;
            .form-item {
                display: flex;
                margin-bottom: 10px;
                min-height: 36px;
                align-items: center;
                font-size: 14px;
                color: #333;
                &.special {
                    align-items: initial;
                    .label {
                        position: relative;
                        top: 10px;
                    }
                }
                .label {
                    width: 100px;
                    text-align-last: justify;
                    color: #666;
                }
                .cont {
                    flex: 1;
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    .img-upload {
                        margin-right: 10px;
                    }
                    .el-input {
                        width: 300px;
                    }
                    .el-select {
                        width: 300px;
                    }
                    .img-box {
                        display: flex;
                        width: 200px;
                        height: 100px;
                        background: #eee;
                        justify-content: center;
                        align-items: center;
                        overflow: hidden;
                        img {
                            max-width: 100%;
                            max-height: 100%;
                        }
                    }
                    .tree-box {
                        box-sizing: border-box;
                        width: 260px;
                        height: 200px;
                        overflow-y: auto;
                        border: 1px solid #ddd;
                        border-radius: 2px;
                        padding: 8px;
                    }
                }
            }
        }
    }
    .control {
        padding: 0 0 16px;
    }
}
</style>